<template>
  <div>
    <i class="el-icon-arrow-left" @click="setDate('-')"></i>
    <input readonly type="text" style="width: 80px; height: 20px; text-align: center;" :value="getDate" />
    <i class="el-icon-arrow-right" @click="setDate('+')"></i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newDate: new Date()
    }
  },
  computed: {
    getDate() {
      return this.newDate.getFullYear() + '年' + this.zeroFn(this.newDate.getMonth() + 1)
    }
  },
  methods: {
    zeroFn(val) {
      return val < 10 ? '0' + val : val
    },
    setDate(str){
      if(str == '+'){
        this.newDate.setMonth(this.newDate.getMonth() + 1)
      }else{
        this.newDate.setMonth(this.newDate.getMonth() - 1)
      }
      this.newDate = new Date(this.newDate)
      this.$emit('change',this.newDate)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
